<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础设置</el-breadcrumb-item>
      <el-breadcrumb-item>类型管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片搜索图表 -->
    <el-card v-loading="loading">
      <div>
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" @click="dialogVisible = true">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-tree :data="tree" node-key="id" default-expand-all :expand-on-click-node="false">
        <span class="my-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="actions">
            <el-button type="text" @click="() => append(node)">添加子项</el-button>
            <el-button
              v-if="!data.children || data.children.length === 0"
              type="text"
              @click="() => remove(node, data)"
            >删除</el-button>
          </span>
        </span>
      </el-tree>
    </el-card>

    <!--  新增字典对话框-->
    <el-dialog title="新增" :visible.sync="dialogVisible" width="50%">
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="80px">
        <el-form-item label="名称" prop="label">
          <el-input v-model="addForm.label"></el-input>
        </el-form-item>
        <el-form-item label="分值" prop="value">
          <el-input v-model.number="addForm.value"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      addForm: {
        label: '',
        father_id: '',
        value: ''
      },
      tree: [],
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      addFormRules: {
        name: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
        value: [
          {
            required: false,
            pattern: /^\d{1,3}$/,
            message: '无效的分值',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    append(node) {
      this.dialogVisible = true;
      this.addForm.father_id = node.data.id;
    },
    async init() {
      this.loading = true;
      const { data: resp } = await this.$http.get('node/tree');
      this.$message({
        message: resp.msg,
        type: resp.code === 0 ? 'success' : 'error'
      });
      if (resp.code === 0) {
        this.tree = resp.data;
      }
      this.loading = false;
    },
    async remove(node, data) {
      this.loading = true;
      const { data: resp } = await this.$http.post('node/delete', {
        id: data.id
      });
      if (resp.code === 0) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      }
      this.loading = false;

      this.$message({
        message: resp.msg,
        type: resp.code === 0 ? 'success' : 'error'
      });
    },

    add: async function() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return;

        this.loading = true;
        const { data: resp } = await this.$http.post('node/save', this.addForm);
        this.$message({
          message: resp.msg,
          type: resp.code === 0 ? 'success' : 'error'
        });

        if (resp.code === 0) {
          this.init();
          this.addForm.label = '';
          this.addForm.father_id = '';
          this.addForm.value = '';
        }
        this.dialogVisible = false;
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.my-tree-node {
  padding: 2px 10px 5px 0px;
  .actions {
  }
}
</style>
